<template>
  <div>
    <!-- 关闭按钮 -->
    <van-nav-bar
  title="注册"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <!-- logo -->
    <div class="logo">
      <img src="../assets/logo.jpg" alt="">
    </div>
    <!-- 表单 -->
    <van-form>
      <van-field
        v-model="userForm.username"
        name="用户名"
        label="用户名"
        placeholder="用户名/手机号"
        :rules="[{ required: true, message: '请填写用户名/手机号' }]"
      />
      <van-field
        v-model="userForm.nickname"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />
      <van-field
        v-model="userForm.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="register">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        username: '',
        password: '',
        nickName:''
      }
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push('/login')
    },
    async register() {
      const {data:res} = await this.$http.post('register',this.userForm)
      console.log(res)
      if(res.statusCode ===400){
        return this.$toast.fail(res.message)
      }
      this.$toast.success('注册成功')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>

.logo {
  width: 35vw;
  margin: 5.556vw auto;
  border-radius: 50%;
  height: 35vw;
  text-align: center;
  margin-bottom: 6.944vw;
  overflow: hidden;
  img{
    width: 100%;
    height:100%;
  }
}
.form {
  padding: 0 5.556vw;
  input {
    outline: none;
    width: 100%;
    height: 13.889vw;
    border: none;
    font-size: 3.333vw;
    padding-left:5.556vw;
    box-sizing: border-box;
    border-radius: 4.167vw;
    margin-bottom: 2.778vw;
    background: rgb(245, 245, 245,0.3);
  }
  .register {
    width: 100%;
    height: 13.333vw;
    text-align: center;
    color: #fff;
    font-size: 5vw;
    line-height: 13.333vw;
    border: none;
    background: #cc3300;
    border-radius: 6.111vw;
    margin-top: 6.944vw;
    outline: none;
  }
}
.login{
  position:absolute;
  right:5.556vw;
  color:red;
}
</style>